<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://java.sun.com/jsf/core">

    <ui:composition template="layout.xhtml">
        <ui:define name="body">
            <script>
                function title() {
                    document.getElementById('paciente').className='selected';
                }
                window.onload=title;
            </script>
            <f:metadata>
                <f:viewParam name="date" value="#{managerCustomer.dateString}"/>
            </f:metadata>
            <h:form id="customerCreate" enctype="multipart/form-data">
                <h1 class="title">
                    <a href="#" class="back" onclick="history.go(-1)"/>
                    Paciente
                </h1>
                <p:growl showDetail="true" autoUpdate="true"  /> 
                <div class="row">
                    <div class="twelve columns"> 
                        <fieldset>
                            <legend> <h4 style="margin:0 0 10px 0">Dados Gerais</h4></legend>
                            <p:panel id="customerPrimary" style="background: none; border: none;" 
                                     styleClass="container_24 clearfix ">

                                <div class="grid_19">
                                    <p:outputLabel for="name" value="Nome :" styleClass="grid_3"/>
                                    <p:inputText id="name" required="true" styleClass="grid_20" value="#{managerCustomer.customer.name}"/>
                                    <p:outputLabel for="dataNasc" value="Data Nasc :" styleClass="grid_3"/>
                                    <p:calendar id="dataNasc" showOn="button" style=" width: 30.5%"  styleClass="grid_7"
                                                pattern="dd/MM/yyyy" 
                                                value="#{managerCustomer.customer.dateBirth}"/>

                                    <p:outputLabel for="email" value="E-mail :" style="margin-left: 13px;" styleClass="grid_3"/>
                                    <p:inputText id="email" styleClass="grid_8" style=" margin-left: 6px; width: 35.5%" value="#{managerCustomer.customer.email}"/>

                                    <p:outputLabel for="phone" value="Telefone :" styleClass="grid_3"/>
                                    <p:inputMask id="phone" mask="(99) 9999-9999" styleClass="grid_8" value="#{managerCustomer.customer.phone}"/>
                                    <p:outputLabel for="cellular" value="Celular :" style="margin-left: -3px" styleClass="grid_3"/>
                                    <p:inputMask id="cellular" mask="(99) 9999-9999" styleClass="grid_8" style="width: 35.5%" value="#{managerCustomer.customer.cellular}"/>

                                    <p:outputLabel value="Estado Civil:" styleClass="grid_4" style="margin-left: -21px;"/>
                                    <div class="grid_8">
                                        <p:selectOneMenu style="width: 103.5%; height: 21px;"  value="#{managerCustomer.customer.civilStatus}">  
                                            <f:selectItem itemLabel="" itemValue="" />  
                                            <f:selectItems value="#{managerCustomer.selectCivilStatus()}" />  
                                        </p:selectOneMenu> 
                                    </div>
                                    <p:outputLabel value="Sexo : " styleClass="grid_3"/>
                                    <div class="grid_8">
                                        <p:selectOneMenu style="width: 117.5%; height: 21px;" panelStyle="width:150px;" value="#{managerCustomer.customer.gender}" >   
                                            <f:selectItem itemLabel="" itemValue="" />  
                                            <f:selectItems value="#{managerCustomer.gender}" />  
                                        </p:selectOneMenu> 
                                    </div>



                                </div>
                                <div class="grid_5" style="text-align: center;">
                                    <p:panel id="avatar" style="background: none; border: none;" 
                                             styleClass="container_24 clearfix ">
                                        <p:graphicImage id="avatar1" styleClass="image grid_3" 
                                                        style="margin-left:1%; width: 120px;" 
                                                        alt="#{managerCustomer.annex.id}" title="#{managerCustomer.annex.id}"
                                                        url="#{managerCustomer.annex.id eq null ? '':'show/?annex='}
                                                        #{managerCustomer.annex.id eq null ? 'assets/images/avatar.jpg': 
                                                          managerCustomer.annex.id}" />
                                        <div class="clear"></div>


                                        <p:commandButton value="Capturar" icon="ui-icon-image" onclick="capt.show();"  
                                                         process="@this" update="@this, :customerCreate:imagePanel"
                                                         styleClass="grid_23" immediate="true"/>


                                        <p:remoteCommand name="updateavatar" process="@this" update="avatar1" />
                                    </p:panel>


                                </div>
                            </p:panel>

                            <p:dialog id="image" dynamic="true" header="Captura de Imagem" modal="true" widgetVar="capt">  
                                <p:panel id="imagePanel" style="background: none; border: none;" 
                                         styleClass="container_24 clearfix ">
                                    <p:photoCam widgetVar="pc" update=":customerCreate:avatar1" listener="#{managerCustomer.oncapture}"/>
                                    <div class="clear"></div>
                                    <p:commandButton value="Capturar" onclick="pc.capture();" 
                                                     process="@this" update="@this" icon="ui-icon-check"
                                                     styleClass="grid_24" oncomplete="capt.hide();"/>
                                </p:panel>
                            </p:dialog>
                        </fieldset>
                        <fieldset>
                            <legend> <h4 style="margin:0 0 10px 0">Dados Complementares</h4></legend>
                            <p:panel id="customerSecundary" style="background: none; border: none;" 
                                     styleClass="container_24 clearfix ">
                                <p:outputLabel value="CPF:" styleClass="grid_3"/>

                                <p:inputMask id="cpfMask" mask="999.999.999-99" styleClass="grid_8" 
                                             value="#{managerCustomer.customer.cpf}">
                                    <p:ajax event="blur" process="@this, :customerCreate:cpfMask" 
                                            update=":customerCreate:cpfMask"
                                            listener="#{managerCustomer.exist()}" />
                                </p:inputMask>

                                <p:outputLabel value="RG:" styleClass="grid_4"/>
                                <p:inputText styleClass="grid_8" value="#{managerCustomer.customer.rg}"/>

                                <p:outputLabel value="Profissão:" styleClass="grid_3"/>
                                <p:inputText styleClass="grid_20" style="width: 82.3%" value="#{managerCustomer.customer.occupation}"/>

                                <p:outputLabel value="Mãe:" styleClass="grid_3"/>
                                <p:inputText styleClass="grid_8" value="#{managerCustomer.customer.filiationMother}"/>
                                <p:outputLabel value="Profissão:" styleClass="grid_4"/>
                                <p:inputText styleClass="grid_8" value="#{managerCustomer.customer.occupationMother}"/>
                                <div class="clear"/>
                                <p:outputLabel value="Pai:" styleClass="grid_3"/>
                                <p:inputText styleClass="grid_8" value="#{managerCustomer.customer.filiationFather}"/>
                                <p:outputLabel value="Profissão:" styleClass="grid_4"/>
                                <p:inputText styleClass="grid_8" value="#{managerCustomer.customer.occupationFather}"/>
                                <div class="clear"/>
                                <p:outputLabel value="Responsável" styleClass="grid_3"/>
                                <p:inputText styleClass="grid_20" style="width: 82.3%" value="#{managerCustomer.customer.responsible}"/>

                            </p:panel>

                            <p:confirmDialog width="350" closable="false"
                                             message="O CPF informado encontra-se registrado na base, deseja utilizá-lo ?" 
                                             header="CPF já cadastrado" id="customerDlg" widgetVar="customerDlg">
                                <div style="text-align: center;margin: 8px">
                                    <p:commandButton icon="ui-icon-check" value="Sim" 
                                                     action="#{managerCustomer.loadCustomer()}" 
                                                     id="yes" process="@this" update="@form"  />
                                    <p:commandButton icon="ui-icon-close" value="Não"
                                                     action="#{managerCustomer.clearCpf()}" 
                                                     oncomplete="customerDlg.hide()"
                                                     process="@this" update=":customerCreate:cpfMask" />
                                </div>

                            </p:confirmDialog>
                        </fieldset>
                        <fieldset>
                            <legend> <h4 style="margin:0 0 10px 0">Endereço</h4></legend>
                            <p:panel id="address" style="background: none; border: none;" 
                                     styleClass="container_24 clearfix ">

                                <p:outputLabel value="CEP:" styleClass="grid_3" />
                                <p:inputMask mask="99.999-999" styleClass="grid_8" value="#{managerCustomer.address.zipcode}" />

                                <div class="clear"/>
                                <p:outputLabel value="Logradouro:" styleClass="grid_3" />
                                <p:inputText styleClass="grid_20" style="width: 82.5%" value="#{managerCustomer.address.publicPark}" />
                                <div class="clear"/>
                                <p:outputLabel value="Bairro:" styleClass="grid_3" />
                                <p:inputText  styleClass="grid_8" value="#{managerCustomer.address.neighborhood}" />
                                <p:outputLabel value="Complemento:" styleClass="grid_4" />
                                <p:inputText styleClass="grid_8"  value="#{managerCustomer.address.complement}" />
                                <div class="clear"/>
                                <p:outputLabel value="Nº:" styleClass="grid_3" />
                                <p:inputText styleClass="grid_8" value="#{managerCustomer.address.number}" />

                                <p:outputLabel  value="Cidade:" styleClass="grid_4"  />
                                <p:autoComplete value="#{managerCustomer.city}" style="width: 28.5%" var="cityValue" 
                                                completeMethod="#{managerCity.autocomplete}"
                                                itemLabel="#{cityValue.name.toString().concat(' - ')}#{cityValue.country.sgl}" itemValue="#{cityValue}" 
                                                scrollHeight="200" 
                                                styleClass="grid_7" dropdown="true"
                                                converter="#{autocompleteconverter}" /> 
                            </p:panel>
                        </fieldset>
                        <fieldset>
                            <legend> <h4 style="margin:0 0 10px 0">Plano de Saúde</h4></legend>
                            <p:panel id="customerplain" style="background: none; border: none;" 
                                     styleClass="container_24 clearfix ">
                                <p:outputLabel value="Operadora:" styleClass="grid_3"/>
                                <p:autoComplete value="#{managerCustomer.operator}" style="width: 79.5%" 
                                                id="operator" completeMethod="#{managerOperator.autocomplete}"  
                                                var="o" itemLabel="#{o.name}" itemValue="#{o}" 
                                                styleClass="grid_19" dropdown="true"
                                                converter="#{autocompleteconverter}" />
                                <div class="clear"/>
                                <p:outputLabel value="Nº Carteirinha" styleClass="grid_3"/>
                                <p:inputText styleClass="grid_8" value="#{managerCustomer.customer.cardNumber}"/>
                                <p:outputLabel value="Validade" styleClass="grid_4"/>
                                <p:inputText styleClass="grid_8" value="#{managerCustomer.customer.validateCard}"/>

                            </p:panel>
                        </fieldset>
                        <div class="buttonAction">
                            <p:commandButton value="Salvar" icon="ui-icon-disk"
                                             process="@form" update="@form" actionListener="#{managerCustomer.save()}"
                                             styleClass="ui-priority-primary" />
                            <p:button href="indexcustomer.xhtml" value="Cancelar"  icon="ui-icon-arrowreturnthick-1-w" />
                        </div >
                    </div>
                </div>


            </h:form>
        </ui:define>
    </ui:composition>

</html>
